<!-- 头部 -->
<template>
  <div class="right-bottom u-p-t-10">
    <div class="boxline right-bottom-box u-rela">
      <h2 class="titleText "
      style="position: absolute;left:10px;">当日各年级平均出勤率</h2>
      <div class="region-echarts" v-if="pageflag" style="height: 100%">
        <Echart
          :options="regionOptions"
          id="regionChart"
          class="region-echarts_center"
        ></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
    schooleId:{
      type:[String, Number],
      default:0
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
     async getDataHandler(){
       let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/data_center/getTodayGradeAttendance',{params})
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
          this.getData(data.data)
        }
      } catch {
        console.log('error')
      }
    },
    getData(res) {
      this.pageflag = true;
      if (res) {
        const newData = [];
        const titleData=[]
        res.forEach((iv) => {
          const obj = {
            name: iv.title,
            value: iv.avg_temperature,
            rate:iv.avg_heart_rate
          };
          newData.push(obj);
          titleData.push(iv.title)
        });
        this.init(newData,titleData);
      }
    },
    init(newData,titleData) {
      // 区域分布
      this.regionOptions = {
        color: ["#4A4DF0"],
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          itemWidth:15,
          itemHeight:15,
          right:0
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#8BBAE4",
          },
          data: titleData,
        },
        yAxis: {
          max: 100, // 最大值
          min: 0, // 最小值
          type: "value",
          axisLabel: {
            color: "#8BBAE4",
          }
        },
        series: [
          {
            name: "出勤率",
            type: "bar",
            data: newData,
            itemStyle: {
            // borderRadius: 10, // 统一设置四个角的圆角大小
              borderRadius: [50, 50, 50, 50] //（顺时针左上，右上，右下，左下）
            }
          },{
            name: "出勤率",
            type: "line",
            symbolSize:10,
            symbol:'circle',
            itemStyle: {
                normal: {
                    color: '#D14F83',
                    borderColor:'#ccc',
                    barBorderRadius: 6,
                    label: {
                      show: true,
                      position: 'top',
                      color: '#FFB81C',
                      formatter: function(p) {
                        return p.rate > 0 ? (p.rate) : '';
                      } 
                    }
                }
            },
            data: newData,
          }
        ],
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.right-bottom{
  width: 100%;
  height: 100%;
  
  &-box {
    height: 100%;
  }
}
</style>
